<extend name="public/base" />
<block name="main-content">
    <el-card class="box-card">
        <!-- card-header -->
        <div slot="header" class="clearfix">
            <span>编辑</span>
        </div>
        <!-- card-body -->
        <el-form 
            ref="roleGroupEditForm" 
            v-loading="loading"
            :model="form" 
            label-width="90px" 
            label-position="right" 
            :rules="rules"
            status-icon
        >
            <el-row :gutter="15">
                <el-col :span="16" :lg="12" :xl="10">
                    <el-form-item label="角色名称" prop="title">
                        <el-input 
                            id="rolename"
                            v-model="form.title"
                            label="角色名称"
                            maxlength="20"
                            placeholder="请输入角色名称"
                            clearable
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" :lg="9" :xl="9"></el-col>
            </el-row>
            <el-row :gutter="15">
                <el-col :span="16" :lg="12" :xl="10">
                    <el-form-item label="角色描述" prop="description">
                        <el-input 
                            type="textarea"
                            rows="2"
                            id="roleDescription"
                            v-model="form.description"
                            label="角色描述"
                            maxlength="60"
                            placeholder="请输入角色描述"
                        >
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8" :lg="9" :xl="9"></el-col>
            </el-row>
            <el-row :gutter="15">
                <el-col :span="16" :lg="12" :xl="10">
                    <el-form-item label="状态" prop="status">
                        <el-radio-group v-model="form.status" size="medium">
                            <el-radio-button label="1">显示</el-radio-button>
                            <el-radio-button label="0">隐藏</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="8" :lg="9" :xl="9"></el-col>
            </el-row>
            <el-row :gutter="15">
                <el-col :span="16" :lg="12" :xl="10">
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                        <el-button type="primary" @click="goBack">返回</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="8" :lg="9" :xl="9"></el-col>
            </el-row>
        </el-form>
    </el-card>
</block>
<block name="footer-script">
    {__block__}
    <script>
        new Vue({
            el: '#website',
            data() {
                return {
                    isCollapse: false,
                    form: JSON.parse('{$authGroup}'),
                    loading: false,
                    rules: {
                        title: [
                            {required: true, message: "角色名称不能为空"},
                            {pattern: /^[\u4e00-\u9fa5\w\-]*$/, message: "角色名称只能是字母、数字、下划线_、破折号-及汉字"}
                        ],
                        status: [
                            {required: true, message: "状态不能为空"},
                        ]
                    }
                }
            },
            methods: {
                onSubmit() {
                    this.$refs.roleGroupEditForm.validate((valid) => {
                        this.$message.closeAll();
                        if (valid)
                        {
                            this.loading = true;
                            let vm = this;
                            this.axios.put('{:url("/" . $Think.const.CONTROLLER . "/'+this.form.id+'")}?_ajax=1', {
                                form: JSON.stringify(this.form),
                                scene: 'all'
                            })
                            .then(function(response) {
                                let data = response.data;
                                if (1 === data.code)
                                {
                                    vm.$message( elMessageOptions(data.msg[0], 'success') );
                                    setTimeout(() => {
                                        if (data.url)
                                            window.location.href = data.url;
                                        
                                        // 更新成功返回角色组列表页
                                        history.back(-1);
                                    }, 2000)
                                } else if (0 === data.code) {
                                    vm.loading = false;
                                    vm.$message (elMessageOptions(data.msg) );
                                }
                            })
                            .catch(function(error) {
                                vm.loading = false;
                                vm.$message( elMessageOptions( adminEditingError(error) ) );
                            })
                        } else {
                            return false;
                        }
                    });
                }
            }
        })
    </script>
</block>